<template>
  <div>
    <v-layout class="px-3 pb-2">
      <v-flex xs2>
        <v-btn color="info">新增品牌</v-btn>
      </v-flex>
      <v-spacer/>
      <v-flex xs4>
        <v-text-field label="搜索" hide-details append-icon="search" v-model="key"/>
      </v-flex>
    </v-layout>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{props.item.id}}</td>
        <td class="text-xs-center">{{props.item.name}}</td>
        <td class="text-xs-center">{{props.item.image}}</td>
        <td class="text-xs-center">{{props.item.letter}}</td>
        <td class="text-xs-center">
          <v-btn flat icon color="info">
            <v-icon>edit</v-icon>
          </v-btn>
          <v-btn flat icon color="error">
            <v-icon>delete</v-icon>
          </v-btn>
        </td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
  export default {
    name: "Brand",
    data(){
      return{
        headers:[
          {text: "品牌ID", value: "id", align: "center", sortable: true},
          {text: "品牌名称", value: "name", align: "center", sortable: false},
          {text: "品牌LOGO", value: "image", align: "center", sortable: false},
          {text: "品牌首字母", value: "letter", align: "center", sortable: true},
          {text: "操作", align: "center", sortable: false}
        ],
        brands: [],
        pagination: {},
        totalBrands: 0,
        loading: false,
        key: "", //搜索条件
      }
    },
    created(){  //页面刚加载完成时
      this.brands = [
        {id: 2032, name: "OPPO", image: "1.jpg", letter: "O"},
        {id: 2033, name: "VIVO", image: "1.jpg", letter: "V"},
        {id: 2034, name: "HUAWEI", image: "1.jpg", letter: "H"},
        {id: 2035, name: "APPLE", image: "1.jpg", letter: "A"},
        {id: 2036, name: "MAC", image: "1.jpg", letter: "M"},
      ];
      this.totalBrands = 15;
      //去后台查询
      this.loadBrands();
    },
    watch:{
      key(){
        this.pagination.page = 1;
      },
      pagination:{  //监视pagination属性的变化
        deep: true, //深度监控，会监视pagination属性以及属性内对象的属性变化
        handler(){ //变化后的回调函数，即pagination属性变化后立即向后台发送AJAX请求加载商品数据
            this.loadBrands();
        }
      }
    },
    methods:{
      loadBrands(){
        this.loading = true; //开启进度条
        this.$http.get("/item/brand/page",{
          params: {
            page: this.pagination.page, //当前页
            rows: this.pagination.rowsPerPage,  //每页大小
            sortBy: this.pagination.sortBy,  //排序字段
            desc: this.pagination.descending, //是否降序
            key: this.key //搜索条件
          }
        }).then(resp => {
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          this.loading = false; //关闭进度条
        });
      }
    }
  }
</script>

<style scoped>

</style>
